<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    {include file='base/common_header'}
    <style>
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form topic-form layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>标题</label>
                    <div class="layui-input-inline">
                        <input value="{$topicInfo.title}" type="text" id="title" name="title" required="" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        <span class="x-red">*</span>描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入描述" id="description" name="description" class="layui-textarea">{$topicInfo.description}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>分类</label>
                    <div class="layui-input-inline">
                        <select id="category" name="category" class="valid">
                            <option value="0" {if $topicInfo.category eq 0}selected{/if}>请选择</option>
                            {volist name='categoryList' id='c' key='k'}
                            <option value="{$c.id}" {if $topicInfo.category eq $c.id}selected{/if}>{$c.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        <span class="x-red">*</span>封面图</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <div class="banner-show" style="width: 200px;margin-top: 5px"><img src="{$topicInfo.banner_img}" style="width: auto;max-width: 100%;max-height: 100%"></div>
                        <input type="hidden" value="{$topicInfo.banner_img}" name="banner_img" class="banner_img">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        权重</label>
                    <div class="layui-input-inline">
                        <input type="number" id="weight" name="weight" value="{$topicInfo.weight}" required=""  autocomplete="off" class="layui-input">
                        <div style="color: red;">权重数字越小越排前</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>QQ出图方式</label>
                    <div class="layui-input-block">

                        <input type="radio" name="need_share" value="0" title="否" {if $topicInfo.need_share eq 0}checked{/if}>
                        <input type="radio" name="need_share" value="1" title="分享获得结果" {if $topicInfo.need_share eq 1}checked{/if}>
                        <input type="radio" name="need_share" value="2" title="看广告获得结果" {if $topicInfo.need_share eq 2}checked{/if}>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        <span class="x-red">*</span>QQ分享图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="share-img">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <div class="share-show" style="width: 200px;margin-top: 5px"><img src="{$topicInfo.share_img}" style="width: auto;max-width: 100%;max-height: 100%"></div>
                        <input type="hidden" value="{$topicInfo.share_img}" name="share_img" class="share_img">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">QQ分享内容</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入分享内容" id="share_content" name="share_content" class="layui-textarea">{$topicInfo.share_content}</textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">QQ分享说说</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入分享说说内容" id="share_shuoshuo" name="share_shuoshuo" class="layui-textarea">{$topicInfo.share_shuoshuo}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>微信出图方式</label>
                    <div class="layui-input-block">
                        <input type="radio" name="weixin_need_share" value="0" title="否" {if $topicInfo.weixin_need_share eq 0}checked{/if}>
                        <input type="radio" name="weixin_need_share" value="1" title="分享获得结果" {if $topicInfo.weixin_need_share eq 1}checked{/if}>
                        <input type="radio" name="weixin_need_share" value="2" title="看广告获得结果" {if $topicInfo.weixin_need_share eq 2}checked{/if}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>头条出图方式</label>
                    <div class="layui-input-block">
                        <input type="radio" lay-filter="ttShare" name="tt_need_share" value="0" title="否" {if $topicInfo.tt_need_share eq 0}checked{/if}>
                        <input type="radio" lay-filter="ttShare" name="tt_need_share" value="1" title="分享获得结果" {if $topicInfo.tt_need_share eq 1}checked{/if}>
                        <input type="radio" lay-filter="ttShare" name="tt_need_share" value="2" title="看广告获得结果" {if $topicInfo.tt_need_share eq 2}checked{/if}>
                        <input type="radio" lay-filter="ttShare" name="tt_need_share" value="3" title="支付获得结果" {if $topicInfo.tt_need_share eq 3}checked{/if}>
                    </div>
                </div>
                <div class="layui-form-item tt-price" {if $topicInfo.tt_need_share neq 3}style="display:none"{/if}>
                    <label class="layui-form-label">
                        头条测评支付费用</label>
                    <div class="layui-input-inline">
                        <input type="number"  name="tt_play_price" value="{$topicInfo.tt_play_price}" required=""  autocomplete="off" class="layui-input">
                        <div style="color: red;">支付费用不能超过10元，请注意</div>
                    </div>
                </div>
                <div class="layui-form-item  tt-price" {if $topicInfo.tt_need_share neq 3}style="display:none"{/if}>
                    <label class="layui-form-label">
                        头条分销比例（%）</label>
                    <div>
                        <div style="float: left">
                            <div>支付一级分销比例（%）</div>
                            <div class="layui-input-inline">
                                <input type="number"  name="fir_distribution" value="{$topicInfo.fir_distribution}" required=""  autocomplete="off" class="layui-input">
                                <div style="color: red;">分销比例只能为正整数，且不能小于或大于100，当佣金小于0.01时不做处理，请注意</div>
                            </div>
                        </div>
                        <div>
                            <div>支付二级分销比例（%）</div>
                            <div class="layui-input-inline">
                                <input type="number"  name="sec_distribution" value="{$topicInfo.sec_distribution}"  required=""  autocomplete="off" class="layui-input">
                                <div style="color: red;">分销比例只能为正整数，且不能小于或大于100，当佣金小于0.01时不做处理，请注意</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        抖音小程序分享id</label>
                    <div class="layui-input-inline">
                        <input type="text" id="tt_share_template_id" value="{$topicInfo.tt_share_template_id}" name="tt_share_template_id"  required=""  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <input type="hidden" name="id" value="{$topicInfo.topic_id}">
                <input type="hidden" name="type" value="2">
                <input type="hidden" name="img_proportion" class="img_proportion">
                <button class="layui-btn" lay-filter="add" lay-submit="">更新</button></div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            //监听提交
            form.on('submit(add)',
                function(data) {
                    $.post("/admin/topic/save",$('.topic-form').serialize(),function (res) {
                        if(res.error_code != 0){
                            layer.msg(res.msg,{icon:5});
                        }else{
                            //发异步，把数据提交给php
                            layer.msg("更新成功", {
                                    icon: 6
                                },
                                function() {
                                    window.parent.location.reload();
                                    // 获得frame索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //关闭当前frame
                                    parent.layer.close(index);
                                });
                        }
                    },'json')
                    return false;
                });





            /**
             *
             * 头条分享类型切换触发事件
             * */
            form.on("radio(ttShare)", function (data) {
                if(data.value == 2){
                    $('.ad-price').css('display','');
                }
                else{
                    $('.ad-price').css('display','none')
                }

                if(data.value == 3){
                    $('.tt-price').css('display','');
                }
                else{
                    $('.tt-price').css('display','none')
                }

            })


            /***
             *
             * 初始化触发事件
             * */


            /**
             * 以上为初始化触发事件
             * */


        });
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#test1' //绑定元素
            ,url: '/api/fileUpload' //上传接口
            ,size: 512
            ,data:{useOrigin:1}
            ,done: function(res){
                //上传完毕回调
                if(res.code == 1){
                    $('#test1').parents('.layui-input-block').find('.banner-show').find('img').attr('src',res.photo)
                    $('#test1').parents('.layui-input-block').find('.banner_img').val(res.photo)
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg('上传失败')
            }
        });
    });

    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#share-img' //绑定元素
            ,url: '/api/fileUpload' //上传接口
            ,size: 512
            ,data:{useOrigin:1}
            ,done: function(res){
                //上传完毕回调
                if(res.code == 1){
                    $('#share-img').parents('.layui-input-block').find('.share-show').find('img').attr('src',res.photo)
                    $('#share-img').parents('.layui-input-block').find('.share_img').val(res.photo)
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg('上传失败')
            }
        });
    });

    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#qqcode-img' //绑定元素
            ,url: '/api/fileUpload' //上传接口
            ,size: 512
            ,data:{useOrigin:1}
            ,done: function(res){
                //上传完毕回调
                if(res.code == 1){
                    $('#qqcode-img').parents('.layui-input-block').find('.share-show').find('img').attr('src',res.photo)
                    $('#qqcode-img').parents('.layui-input-block').find('.qqcode_img').val(res.photo)
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg('上传失败')
            }
        });
    });

    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#weixincode-img' //绑定元素
            ,url: '/api/fileUpload' //上传接口
            ,size: 512
            ,data:{useOrigin:1}
            ,done: function(res){
                //上传完毕回调
                if(res.code == 1){
                    $('#weixincode-img').parents('.layui-input-block').find('.share-show').find('img').attr('src',res.photo)
                    $('#weixincode-img').parents('.layui-input-block').find('.weixincode_img').val(res.photo)
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg('上传失败')
            }
        });
    });

    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#ttcode-img' //绑定元素
            ,url: '/api/fileUpload' //上传接口
            ,size: 512
            ,data:{useOrigin:1}
            ,done: function(res){
                //上传完毕回调
                if(res.code == 1){
                    $('#ttcode-img').parents('.layui-input-block').find('.share-show').find('img').attr('src',res.photo)
                    $('#ttcode-img').parents('.layui-input-block').find('.ttcode_img').val(res.photo)
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg('上传失败')
            }
        });
    });




    layui.use('upload', function(){
        var upload = layui.upload;
        var _sucai_list = [];
        //执行实例
        upload.render({
            elem: '#sucai' //绑定元素
            ,url: '/api/fileUpload' //上传接口
            ,size: 512
            ,multiple: true
            ,data:{useOrigin:1}
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                if(_sucai_list.length > 0){
                    var _html =  '',_sucai_img = '',_sucai_img_origin=''
                    $(_sucai_list).each(function (k,v) {
                        _html += "<img src='"+v.photo+"'/>"
                        _sucai_img += v.photo +','
                        _sucai_img_origin += v.origin_name +','
                    })
                    $('.sucai-carousel').html(_html)

                    $('.sucai-div').removeClass('layui-col-md12')
                    $('.sucai-div').addClass('layui-col-md6')
                    $('.sucai-show').css('display','')
                    $('.sucai-num').html(_sucai_list.length)
                    _sucai_img = _sucai_img.substring(0,_sucai_img.length-1);
                    _sucai_img_origin = _sucai_img_origin.substring(0,_sucai_img_origin.length-1);
                    $('.sucai_img').val(_sucai_img)
                    $('.sucai_img_origin').val(_sucai_img_origin)



                    //将第一个图片放到预览图中
                    var _first_banner = _sucai_list.shift()
                    $('.preview-bg').attr('src',_first_banner.photo)
                    $('.preview-bg').on('load',function () {
                        getnNewImg()
                        carousel($bg.height)
                    })



                    _sucai_list = [];
                }
            }
            ,done: function(res){
                if(res.code == 1){
                    _sucai_list.push(res)
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg('上传失败')
            }
        });
    });



</script>
</body>

</html>